<h1>Customer Details</h1>

<div class="row">
	<div class="col-md-6">
		<div class="row">
		  <div class="col-md-3"><strong>First Name</strong></div>
		  <div class="col-md-9">{{customer.firstname}}</div>
		</div>
		<div class="row">
		  <div class="col-md-3"><strong>Last Name</strong></div>
		  <div class="col-md-9">{{customer.lastname}}</div>
		</div>
		<div class="row">
		  <div class="col-md-3"><strong>Location</strong></div>
		  <div class="col-md-9">Latitude: {{customer.address.location.latitude}}, Longitude: {{customer.address.location.longitude}}</div>
		</div>
	</div>
	<div class="col-md-6">
		<google-map center="map.center" zoom="map.zoom" draggable="true">
			<marker coords='customer.address.location'></marker>
			<markers idkey="id" coords="'self'" icon="'icon'" doCluster="true" models="stores" doRebuildAll="true"></markers>
		</google-map>
	</div>
</div>

<h2>Stores Nearby</h2>

<table class="table table-striped table-hover">
  <thead>
    <th>Name</th>
    <th>City</th>
    <th>Zip</th>
  </thead>
  <tbody>
    <tr ng-repeat="store in stores">
      <td>{{store.name}}</td>
      <td>{{store.address.city}}</td>
      <td>{{store.address.zip}}</td>
    </tr>
  </tbody>
</table>

<button type="button" class="btn btn-default" ng-click="goBack()">Back</button>